<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="../css/reset.css" />
        <link rel="stylesheet" type="text/css" href="../css/style.css" />
        <link rel="stylesheet" type="text/css" href="../css/header.css" />
        <link rel="stylesheet" type="text/css" href="../css/messageList.css" />

        <script type="text/javascript" src="../js/flexible.debug.js"></script>

        <script type="text/javascript" src="../js/flexible_css.debug.js"></script>

       

    </head>
    <body>
        <header class="header">
            <span class="span fanghui"><img src="../img/fanhui.png"/></span>
            <span class="span">消息</span>
            <span class="span"></span>
        </header>


        <main class="main">
            <section class="section">
                <div class="list">

                    <!--<dl class='dl_one'>
                        <dt> <img src="../img/list1.png" height="160" width="160" alt="" /></dt>
                        <dd>
                            <p><span>Mona回复:</span><span>11:00AM</span></p>
                            <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                        </dd>
                    </dl>   


                      <dl class='dl_one'>
                        <dt> <img src="../img/list2.png" height="160" width="160" alt="" /></dt>
                        <dd><p><span>Keity-andy:</span><span>15:00PM</span></p>
                        <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                    </dd>
                    </dl>  

                      <dl class='dl_one'>
                        <dt> <img src="../img/list3.png" height="160" width="160" alt="" /></dt>
                        <dd><p><span>Keit-andy:</span><span>16:00AM</span></p>
                        <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                    </dd>
                    </dl>  

                      <dl class='dl_one'>
                        <dt> <img src="../img/list4.png" height="160" width="160" alt="" /></dt>
                        <dd><p><span>Mona回复:</span><span>11:00AM</span></p>
                        <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                    </dd>
                    </dl>  

                     <dl class='dl_one'>
                        <dt> <img src="../img/list5.png" height="160" width="160" alt="" /></dt>
                        <dd><p><span>Keit-andy:</span><span>15:00PM</span></p>
                        <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                    </dd>
                    </dl>  

                      <dl class='dl_one'>
                        <dt> <img src="../img/list6.png" height="160" width="160" alt="" /></dt>
                        <dd><p><span>Keit-andy:</span><span>16:00PM</span></p>
                        <p>Lorem ipsum dolor sit amet,consectetur,adipiscing elit.</p>
                    </dd>
                    </dl>  -->



                </div>


               
               
            </section>
        </main>

        
		 <script type="text/javascript" src="../js/jquery.1.12.4.js"></script>
		 <script src="../js/artTemplate.js"></script>
		
		 
		 <script type="text/html" id="tr-temp"> 
		 	
                        
		    {{each list as v}}
		    <dl class='dl_one'>
               <dt><img src="{{v.img}}"/></dt>
            		<dd><p><span>{{v.biaoti}}</span><span>{{v.shijian}}</span></p>
                    <p>{{v.duanluo}}</p>
              
               </dd>
            </dl>    
             
           {{/each}}
		</script>
		
		
        <script>
		
			 $(function(){
            
            
            var _url = '../json/messageList.json';
            $.get(_url,function(res){
				console.log(res)
				var str = '';
				 var str = template("tr-temp", {list:res});	 
				 console.log(str);
				$('.list').html(str);
				
			})

            
            
            
         })
			 $('.fanghui').click(function(){
				location.href="../index.html";
				
			});
		</script>


        
       
    </body>
</html>